import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { Upload ,message} from 'antd';
import axios from '../../../axios/axios'
class userinfo extends Component {
    constructor(props){
        super(props);
        this.state={
            userinfo:{},
            props:{},
            name:''
        }
    }
    componentWillMount(){
        const props = {
            name:'image',
            action:'',
            customRequest:(action)=>{
                console.log(action,action.file)
                const params = new FormData()
              params.append('image',action.file)
                axios.post('small/user/verify/v1/modifyHeadPic',params,{
                    headers:{
                      'content-type':'multipart/form-data'
                    }}).then(res=>{
                        console.log(res);
                        if(res.data.status=='0000'){
                            message.success(res.data.message);
                            var user = JSON.parse(localStorage.getItem("user_info"));
                            user.headPic=res.data.headPath;
                            localStorage.setItem("user_info",JSON.stringify(user));
                            this.setState({
                                userinfo:user
                            });
                          }
                })
            }
          };
        this.setState({
            props
        });
        if(localStorage.getItem('user_info')){
            this.setState({
                userinfo:JSON.parse(localStorage.getItem('user_info'))
            });
        }
    }
    changename(e){
        this.setState({
            name:e.target.value
        })
    }
    tijiao(){
        axios.put('small/user/verify/v1/modifyUserNick?nickName='+this.state.name).then(res=>{
            if(res.data.status="0000"){
                message.success(res.data.message);
                var user = JSON.parse(localStorage.getItem("user_info"));
                user.nickName=this.state.name;
                localStorage.setItem("user_info",JSON.stringify(user));
                this.setState({
                    userinfo:user
                });
            }
        })
    }
    render() {
        return (
            <div className="userinfo">
                <div className="right-mark">个人资料</div>
                <ul className="person-info">
                    <li className="item s1">
                        <span className="label">当前头像：</span>
                        <div className="info-data"><img className="face" src={this.state.userinfo.headPic} alt="狗头保命" />
                        <Upload {...this.state.props}><Link className="action" to="###">修改</Link></Upload>
                            
                        </div>
                    </li>
                    <li className="item">
                        <span className="label">昵称：</span>
                        <div className="info-data"><input className="nickname" type="text" placeholder="昵称" placeholder={this.state.userinfo.nickName} value={this.state.name} onChange={this.changename.bind(this)} /></div>
                    </li>
                    <li className="item">
                        <span className="label">性别：</span>
                        <div className="info-data">
                            <div className="radio">
                                <label>
                                    <input type="radio" name="sex" />&nbsp;&nbsp;男
                                </label>
                            </div>
                            <div className="radio  active">
                                <label>
                                    <input type="radio" name="sex" checked="checked" />&nbsp;&nbsp;女
                                    </label>
                            </div>
                        </div>
                    </li>
                    <li className="item">
                        <span className="label">生日：</span>
                        <div className="info-data">
                            <div className="select-list">
                                <div className="sel">
                                    <select className="province">
                                        <option value="0">2020</option>
                                    </select>&nbsp;&nbsp;年
                                </div>
                                <div className="sel">
                                    <select className="city">
                                        <option value="0">10</option>
                                    </select>&nbsp;&nbsp;月
                                </div>
                                <div className="sel">
                                    <select className="area">
                                        <option value="0">1</option>
                                    </select>&nbsp;&nbsp;日
                                </div>

                            </div>
                        </div>
                    </li>
                    <li className="item">
                        <span className="label">手机：</span>
                        <div className="info-data"><input className="nickname" type="text" placeholder="手机号码" value={this.state.userinfo.phone} /> <Link to="/people/phonehb" className="transhpone">更换手机</Link></div>
                    </li>
                    <li className="item">
                        <span className="label"></span>
                        <div className="info-data"><button onClick={this.tijiao.bind(this)} className="submit">确认提交</button></div>
                    </li>
                </ul>
            </div>
        );
    }
}

export default userinfo;